<template>
  <div class="non-trace-form-item">

    <div class="instructions-wrap">
      <div>
        <h4 @click="touchpop('xxxs')">填写说明</h4>
        <p>1、请先准备如下材料</p>
        <p>2、上传附件须为20M以下的jpg\png\pdf格式文件，且附件命名须准确</p>
        <p>3、信息全部填写完整后方能提交审核</p>
        <p>4、提交后不能修改信息，需等待审核，审核周期为XX个自然日</p>
        <p>5、信息填报过程中，如遇到注册、登录等系统问题，可联系XXX进行咨询</p>
      </div>
      <div></div>
    </div>

    <el-form ref="ruleForm" :label-position="'top'" label-width="80px" :model="formLabelAlign">

      <SkyPanel title="营业执照信息" id="first">
        <!-- <template v-slot:header>
        <div>header</div>
      </template> -->
        <template v-slot:main>

          <div class="label-title">
            营业执照附件
          </div>
          <div class="label-content">
            支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
          </div>

          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <template #default>
              <i class="el-icon-plus"></i>
            </template>
            <template #file="{file}">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

          <div>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="公司名称" prop="key1" :rules="[
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="统一社会信息代码" prop="key2" :rules="[
                    { required: true, message: '请输入统一社会信息代码', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业注册地址" prop="key3" :rules="[
                    { required: true, message: '请输入企业注册地址', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key3"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="法人代表" prop="key4" :rules="[
                    { required: true, message: '请输入法人代表', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key4"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法人代表手机号" prop="key5" :rules="[
                    { required: true, message: '请输入法人代表手机号', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key5"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法人代表身份证号" prop="key6" :rules="[
                    { required: true, message: '请输入法人代表身份证号', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key6"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="注册资金" prop="key7" :rules="[
                    { required: true, message: '请输入注册资金', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key7"></el-input>
                  <span class="unit">万元</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="成立日期" prop="key7" :rules="[
                    { required: true, message: '请输入成立日期', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key7"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="营业期限" prop="key8" :rules="[
                    { required: true, message: '请输入营业期限', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key8"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="经营范围" prop="key9" :rules="[
                    { required: true, message: '请输入经营范围', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key9"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="是否有关联公司" :rules="[
                    { required: true, message: '请输入关联公司', trigger: 'blur' },
                  ]">
                  <el-radio-group v-model="formLabelAlign.key10">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件类型" :rules="[
                    { required: true, message: '请输入证件类型', trigger: 'blur' },
                  ]">
                  <el-radio-group v-model="formLabelAlign.key11">
                    <el-radio label="身份证"></el-radio>
                    <el-radio label="其他证件"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <div class="card-uploader">
                  <el-form-item label="法人代表身份证扫描件" prop="key21" :rules="[
                    { required: true, message: '请选择身份证扫描件', trigger: 'blur' },
                  ]" style="border:none">
                    <div class="label-content">
                      支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
                    </div>
                    <div class="uploading">
                      <div>
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                          <template #default>
                            <i class="el-icon-plus"></i>
                          </template>
                          <template #file="{file}">
                            <div>
                              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                              <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                          </template>
                        </el-upload>
                        <el-dialog v-model="dialogVisible">
                          <img width="100%" :src="dialogImageUrl1" alt="">
                        </el-dialog>
                      </div>

                      <div>
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                          <template #default>
                            <i class="el-icon-plus"></i>
                          </template>
                          <template #file="{file}">
                            <div>
                              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                              <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                          </template>
                        </el-upload>
                        <el-dialog v-model="dialogVisible">
                          <img width="100%" :src="dialogImageUrl2" alt="">
                        </el-dialog>
                      </div>

                    </div>

                  </el-form-item>
                </div>
              </el-col>
            </el-row>

          </div>

        </template>
      </SkyPanel>

      <SkyPanel title="企业信息" id="two">
        <template v-slot:main>

          <div>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="境内外关系" prop="key12" :rules="[
                    { required: true, message: '请输入境内外关系', trigger: 'blur' },
                  ]">
                  <el-select v-model="formLabelAlign.key12">
                    <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业类型" prop="key13" :rules="[
                    { required: true, message: '请输入企业类型', trigger: 'blur' },
                  ]">
                  <el-select v-model="formLabelAlign.key13">
                    <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司联系方式" prop="key14" :rules="[
                    { required: true, message: '请输入公司联系方式', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key14"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="办公地址" prop="key15" :rules="[
                    { required: true, message: '请输入办公地址', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key15"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="传真号码" prop="key16" :rules="[
                    { required: false, message: '请输入传真号码', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key16"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="办公面积" prop="key17" :rules="[
                    { required: true, message: '请输入办公面积', trigger: 'blur' },
                  ]">
                  <el-input v-model="formLabelAlign.key17"></el-input>
                  <span class="unit">m<sup>2</sup></span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纳税人类型" prop="key18" :rules="[
                    { required: true, message: '请输入纳税人类型', trigger: 'blur' },
                  ]">
                  <el-select v-model="formLabelAlign.key18">
                    <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="三年内是否法律纠纷" :rules="[
                    { required: true, message: '请输入', trigger: 'blur' },
                  ]">
                  <el-radio-group v-model="formLabelAlign.key19">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否被政府部门惩罚" :rules="[
                    { required: true, message: '请输入', trigger: 'blur' },
                  ]">
                  <el-radio-group v-model="formLabelAlign.key20">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <div class="card-uploader">
                  <el-form-item label="一般纳税人附件">
                    <div class="label-content">
                      支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
                    </div>
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                      <template #default>
                        <i class="el-icon-plus"></i>
                      </template>
                      <template #file="{file}">
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                              <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img width="100%" :src="dialogImageUrl3" alt="">
                    </el-dialog>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="card-uploader">
                  <el-form-item label="授权委托书附件" prop="key22" :rules="[
                    { required: true, message: '请选择授权委托书附件', trigger: 'blur' },
                  ]">
                    <div class="upload-template">模板下载</div>
                    <div class="label-content">
                      支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
                    </div>

                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                      <template #default>
                        <i class="el-icon-plus"></i>
                      </template>
                      <template #file="{file}">
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                              <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img width="100%" :src="dialogImageUrl4" alt="">
                    </el-dialog>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </div>

        </template>
      </SkyPanel>

      <SkyPanel title="关联公司" id="three">

        <template v-slot:header>
          <img style="width:16px" src="~@/assets/images/panel-error.png" alt="">
          <span>（我单位所申报的所有关联关系都是真实、准确、完整、有效的，如发现所提供资料缺漏、虚假或与事实不符，我方愿承担由此造成的一切后果）</span>
        </template>

        <template v-slot:main>

          <div class="module-container" v-for="(item,index)   in formLabelAlign.associatedCompanies" :key="index">
            <div class="module-header-container">
              <div>关联公司{{index+1}}</div>
              <div></div>
              <div>删除</div>
            </div>
            <div class="module-main-container">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="关联公司名称" :prop="`associatedCompanies[${index}].key1`" :rules="[
                    { required: false, message: '请输入关联公司名称', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="关联关系" :prop="`associatedCompanies[${index}].key2`" :rules="[
                    { required: false, message: '请输入关联关系', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key2"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="统一社会信用代码" :prop="`associatedCompanies[${index}].key3`" :rules="[
                    { required: false, message: '请输入统一社会信用代码', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key3"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" :rules="[
                    { required: false, message: '请输入备注', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key4"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="module-add">
            <img src="~@/assets/images/module-add.png" alt="">
            <span>新增关联公司</span>
          </div>

        </template>
      </SkyPanel>

      <SkyPanel title="近三年获奖信息" id="four">
        <template v-slot:main>

          <div class="module-container" v-for="(item,index)   in formLabelAlign.associatedCompanies" :key="index">
            <div class="module-header-container">
              <div>获奖信息{{index+1}}</div>
              <div></div>
              <div>删除</div>
            </div>
            <div class="module-main-container">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="获奖名称" :prop="`associatedCompanies[${index}].key1`" :rules="[
                    { required: false, message: '请输入获奖名称', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="获奖日期" :prop="`associatedCompanies[${index}].key2`" :rules="[
                    { required: false, message: '请输入获奖日期', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key2"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="颁奖组织" :prop="`associatedCompanies[${index}].key3`" :rules="[
                    { required: false, message: '请输入颁奖组织', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key3"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <div class="card-uploader">
                    <el-form-item label="附件" prop="key23" :rules="[
                    { required: false, message: '请上传附件', trigger: 'blur' },
                  ]">
                      <div class="label-content">
                        支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
                      </div>

                      <el-upload action="#" list-type="picture-card" :auto-upload="false">
                        <template #default>
                          <i class="el-icon-plus"></i>
                        </template>
                        <template #file="{file}">
                          <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                <i class="el-icon-download"></i>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                              </span>
                            </span>
                          </div>
                        </template>
                      </el-upload>
                      <el-dialog v-model="dialogVisible">
                        <img width="100%" :src="dialogImageUrl5" alt="">
                      </el-dialog>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="module-add">
            <img src="~@/assets/images/module-add.png" alt="">
            <span>新增获奖信息</span>
          </div>

        </template>
      </SkyPanel>

    </el-form>

  </div>
  <div>
    <SkyPanelPositionGroup scrolltop='150' offsettop='150'>
      <SkyPanelPositionUnit prop="first" label="营业执照信息"></SkyPanelPositionUnit>
      <SkyPanelPositionUnit prop="two" label="企业信息"></SkyPanelPositionUnit>
      <SkyPanelPositionUnit prop="three" label="关联公司"></SkyPanelPositionUnit>
      <SkyPanelPositionUnit prop="four" label="近三年获奖信息"></SkyPanelPositionUnit>
    </SkyPanelPositionGroup>
  </div>

  <div class="footer">
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    <el-button type="primary" @click="next">下一步</el-button>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, h } from "vue";
  // import demo from "./components/demo";

  export default defineComponent({
    data() {
      return {
        option: [
          {
            value: "选项一",
            label: "境内机构",
          },
        ],
        option1: [
          {
            value: "选项一",
            label: "私营企业",
          },
        ],
        option2: [
          {
            value: "选项一",
            label: "一般纳税人",
          },
        ],
        dialogImageUrl: "",
        dialogImageUrl1: "",
        dialogImageUrl2: "",
        dialogImageUrl3: "",
        dialogImageUrl4: "",
        dialogImageUrl5: "",
        dialogVisible: false,
        disabled: false,
        formLabelAlign: {
          key1: "",
          key2: "",
          key3: "",
          key4: "",
          key5: "",
          key6: "",
          key7: "",
          key8: "",
          key9: "",
          key10: "",
          key11: "",
          key12: "境内机构",
          key13: "私营企业",
          key14: "",
          key15: "",
          key16: "",
          key17: "",
          key18: "一般纳税人",
          key19: "",
          key20: "",
          associatedCompanies: [
            {
              key1: "",
              key2: "",
              key3: "",
              key4: "",
            },
            {
              key1: "",
              key2: "",
              key3: "",
              key4: "",
            },
          ],
          winningInformation: [
            {
              key1: "",
              key2: "",
              key3: "",
              key4: "",
            },
          ],
        },
      };
    },
    methods: {
      touchpop(id) {
        document.getElementById(id).scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      },
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      next() {
        this.$parent.active = 2;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert("submit!");
          } else {
            alert("error submit!!");
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
    components: {
      // demo,
    },

    // setup() {},
  });
</script> 
<style lang="scss" scoped>
.instructions-wrap {
  display: flex;
  padding: 24px;
  margin-bottom: 14px;
  background: #f9f9fb;
  border-radius: 2px;
  justify-content: space-between;
  & > div:nth-child(2) {
    width: 283px;
    align-items: stretch;
    background: url("~@/assets/images/instructions-bg.png");
    background-size: 100%;
  }
}

.label-title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 29px;
  color: #333333;
  opacity: 1;
}
.label-content {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: #999999;
  opacity: 1;
  margin-bottom: 15px;
}

/**
 *表单样式
 */
.non-trace-form-item {
  /deep/ .el-form-item__label {
    line-height: 30px;
    padding: 0 0 5px;
  }
  /deep/ .el-input__inner {
    outline: none;
    border: none;
  }
  /deep/ .el-form-item__content {
    border-bottom: 1px solid #dcdcdc;
  }
  /deep/ .el-select {
    width: 100%;
  }
}

.module-container {
  width: 100%;
  min-height: 100px;
  background: #f6f8fa;
  padding: 0 20px;
  margin-bottom: 20px;
  .module-header-container {
    display: flex;
    align-items: center;
    padding: 14px 0px;
    & > div:nth-child(1) {
      height: 28px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 28px;
      color: #333333;
      opacity: 1;
    }
    & > div:nth-child(2) {
      flex: 1;
      border-bottom: 1px dashed #dcdcdc;
      height: 1px;
      margin: 0 10px;
    }
    & > div:nth-child(3) {
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 22px;
      color: #1890ff;
      opacity: 1;
      cursor: pointer;
    }
  }

  /deep/ .el-input__inner {
    background: #f6f8fa !important;
    background-color: #f6f8fa !important;
  }
}

.module-add {
  display: flex;
  line-height: 50px;
  align-items: center;
  color: #1890ff;
  cursor: pointer;
  & > img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}

.footer {
  height: 60px;
  width: 1164px;
  position: fixed;
  bottom: 0;
  background: white;
  z-index: 10;
  text-align: right;
  line-height: 60px;
}

.card-uploader {
  /deep/ .el-form-item__label {
    line-height: 30px;
    padding: 0 0 5px;
  }
  /deep/ .el-input__inner {
    outline: none;
    border: none;
  }
  /deep/ .el-form-item__content {
    border-bottom: none;
  }
  /deep/ .el-upload--picture-card {
    margin-right: 10px;
  }
  .uploading {
    display: flex;
    justify-content: start;
  }
}

.upload-template {
  position: absolute;
  top: -40px;
  left: 110px;
  color: #1890ff;
  cursor: pointer;
}
.unit {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
